<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width:100px; height: 100px; background-color: red;position: absolute;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		/*
			一、问题：当鼠标按下onmousedown的时候，如果页面中有文字被选中，那么回触发浏览器默认拖拽文字的效果

			解决办法：
				1）标准下 ：在onmousedown处理函数中使用return false,阻止浏览器默认行为；

				2）IE8及以下 ：给当前元素在鼠标down时设置全局捕获setCapture()【目的是拦截文字的事件，不让文字接收到事件】，同时在鼠标up时取消全局捕获
		*/
		/*
			二、什么是全局捕获	obj.setCapture()  ： 
					当外面给一个元素设置全局捕获以后，这个元素就会监听所有后续发生的所有事件（点击，移入，移出等所有）。只要有事件发生的时候，就会被这个元素所捕获（相当于拦截下来）

					IE      : 有该方法，有效果；
					firefox : 有该方法，但是没有效果；  （不报错）
					chrome  : 没有该方法				（报错）

			三、取消全局捕获 : obj.releaseCapture()

			四、如果需要设置拖拽效果的对象是图片，那么其解决办法和div是一样的
		*/
		var oDiv = document.getElementById('div1');

		oDiv.onmousedown = function (ev){
			var ev = ev || event;

			var disX = ev.clientX - this.offsetLeft;
			var disY = ev.clientY - this.offsetTop;

			document.onmousemove = function (ev){
				var ev = ev || event;

			 	oDiv.style.left = ev.clientX -disX + 'px';
			 	oDiv.style.top = ev.clientY - disY + 'px';
			 }

			 document.onmouseup = function (){

			 	document.onmouseup = document.onmousemove = null;

			 	oDiv.releaseCapture && oDiv.releaseCapture();		//取消全局捕获
			 }

			 oDiv.setCapture && oDiv.setCapture();					//设置全局捕获		阻止文字默认行文(IE8以下)
			 return false;											//阻止文字默认行文(标准下)
		}			
	}
	</script>
</head>
<body>
	<p>asdadsa</p>
	<div id="div1"></div>
</body>
</html>